<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>干掉mapbox里的雪碧图(sprite) | 懒惰的芜菁</title>
  <meta name="keywords" content=" mapbox ">
  <meta name="description" content="干掉mapbox里的雪碧图(sprite) | 懒惰的芜菁">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="gdb,是arcgis重要的数据格式之一，它把矢量数据按以下层级结构存为本地文件 图层 -- 要素 ---- 属性 ---- 形状 ---- 样式gdal提供了函数允许我们读取gdb，因此，我们可以通过jni调用gdal来再java中读取gdal 1、配置gdal环境liunx下按照gdal需要编译，而windows下就比较简单了，下载编译好的dll文件，然后环境变量path里加入dll目录即可">
<meta property="og:type" content="article">
<meta property="og:title" content="java读取arcgis的gdb文件">
<meta property="og:url" content="https://blog.wowtools.org/2020/11/05/2020-11-5-java-read-gdb/index.html">
<meta property="og:site_name" content="懒惰的芜菁">
<meta property="og:description" content="gdb,是arcgis重要的数据格式之一，它把矢量数据按以下层级结构存为本地文件 图层 -- 要素 ---- 属性 ---- 形状 ---- 样式gdal提供了函数允许我们读取gdb，因此，我们可以通过jni调用gdal来再java中读取gdal 1、配置gdal环境liunx下按照gdal需要编译，而windows下就比较简单了，下载编译好的dll文件，然后环境变量path里加入dll目录即可">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-11-05T12:46:25.000Z">
<meta property="article:modified_time" content="2020-11-05T10:04:32.161Z">
<meta property="article:author" content="刘雨">
<meta property="article:tag" content="arcgis">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.0.1" rel="stylesheet">

<link href="/css/hl_theme/github.css?v=1.0.1" rel="stylesheet">

<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/jquery.autocomplete.min.js?v=1.0.1" ></script>

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>



<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js" ></script>

<script src="/js/iconfont.js?v=1.0.1" ></script>

<meta name="generator" content="Hexo 4.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="true">
  <input class="theme_blog_path" value="">
</div>

<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/" class="avatar_target">
    <img class="avatar" src="/img/avatar.jpg" />
</a>
<div class="author">
    <span>刘雨</span>
</div>

<div class="icon">
    
        
        <a title="rss" href="/atom.xml" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-rss"></use>
                </svg>
            
        </a>
        
    
        
        <a title="github" href="https://github.com/codingmiao" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-github"></use>
                </svg>
            
        </a>
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
        <a title="email" href="mailto:liuyu@wowtools.org" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-email"></use>
                </svg>
            
        </a>
        
    
        
        <a title="qq" href="http://wpa.qq.com/msgrd?v=3&uin=750836354&site=qq&menu=yes" target="_blank">
            
                <svg class="iconfont-svg" aria-hidden="true">
                    <use xlink:href="#icon-qq"></use>
                </svg>
            
        </a>
        
    
        
    
        
    
</div>




<ul>
    <li><div class="all active">全部文章<small>(10)</small></div></li>
    
        
            
            <li><div data-rel="gis"><i class="fold iconfont icon-right"></i>gis<small>(5)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="前端">前端<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="工具和软件">工具和软件<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="服务端">服务端<small>(2)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
            <li><div data-rel="奇葩问题">奇葩问题<small>(1)</small></div>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="java"><i class="fold iconfont icon-right"></i>java<small>(3)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="异常">异常<small>(1)</small></div>
                            
                        </li>
                            
                        <li><div data-rel="neo4j">neo4j<small>(2)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
            <li><div data-rel="部署运维"><i class="fold iconfont icon-right"></i>部署运维<small>(1)</small></div>
                
                    <ul class="sub hide">
                        
                        <li><div data-rel="软件安装">软件安装<small>(1)</small></div>
                            
                        </li>
                            
                    </ul>
                
            </li>
            
        
    
        
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
    
    
    
    
    </div>
    <div><a class="about  hasFriend  site_url"  href="/about">关于</a><a style="width: 50%"  class="friends">友链</a></div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="10">
<input type="hidden" id="yelog_site_word_count" value="7k">
<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="back-title-list"></i>
    </div>
    <div class="friends-content">
        <ul>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <form onkeydown="if(event.keyCode==13){return false;}">
        <input class="search" type="text" placeholder="Search..." autocomplete="off"id="local-search-input" >
        <i class="cross"></i>
        <span>
            <label for="tagswitch">Tags:</label>
            <input id="tagswitch" type="checkbox" style="display: none" />
            <i id="tagsWitchIcon"></i>
        </span>
    </form>
    <div class="tags-list">
    
    <li class="article-tag-list-item">
        <a class="color5">geoserver</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">奇葩问题</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">arcgis</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">neo4j扩展开发</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">dojo</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color1">PostgreSQL</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color5">gdal</a>
    </li>
    
    <li class="article-tag-list-item">
        <a class="color2">mapbox</a>
    </li>
    
    <div class="clearfix"></div>
</div>

    
    <nav id="title-list-nav">
        
        <a  class="gis "
           href="/2016/11/28/2016-11-28-geoserver-gwc/"
           data-tag="geoserver"
           data-author="" >
            <span class="post-title" title="geoserver gwc">geoserver gwc</span>
            <span class="post-date" title="2016-11-28 20:46:25">2016/11/28</span>
        </a>
        
        <a  class="java 异常 "
           href="/2017/11/30/2017-11-30-zip-exception/"
           data-tag="奇葩问题"
           data-author="" >
            <span class="post-title" title="Tomcat启动报错ZipException: error in opening zip file及解决">Tomcat启动报错ZipException: error in opening zip file及解决</span>
            <span class="post-date" title="2017-11-30 20:46:25">2017/11/30</span>
        </a>
        
        <a  class="gis 工具和软件 "
           href="/2017/09/05/2017-09-05-arcgis-publishing-layer/"
           data-tag="arcgis"
           data-author="" >
            <span class="post-title" title="arcgis 发布图层">arcgis 发布图层</span>
            <span class="post-date" title="2017-09-05 20:46:25">2017/09/05</span>
        </a>
        
        <a  class="java neo4j "
           href="/2019/12/27/2019-12-27-custom-neo4j1/"
           data-tag="neo4j扩展开发"
           data-author="" >
            <span class="post-title" title="neo4j同时使用嵌入模式和服务模式">neo4j同时使用嵌入模式和服务模式</span>
            <span class="post-date" title="2019-12-27 20:46:25">2019/12/27</span>
        </a>
        
        <a  class="奇葩问题 "
           href="/2018/06/07/2018-06-07-Uncaught-Error-irrationalPath/"
           data-tag="dojo"
           data-author="" >
            <span class="post-title" title="dojo报错Uncaught Error: irrationalPath原因及解决">dojo报错Uncaught Error: irrationalPath原因及解决</span>
            <span class="post-date" title="2018-06-07 20:46:25">2018/06/07</span>
        </a>
        
        <a  class="gis 服务端 "
           href="/2018/03/21/2018-03-21-parse-postgis-shape/"
           data-tag="PostgreSQL"
           data-author="" >
            <span class="post-title" title="postgis空间数据格式解析，及如何绑定变量">postgis空间数据格式解析，及如何绑定变量</span>
            <span class="post-date" title="2018-03-21 20:46:25">2018/03/21</span>
        </a>
        
        <a  class="部署运维 软件安装 "
           href="/2018/05/18/2018-05-18-centos7-install-gdal/"
           data-tag="gdal"
           data-author="" >
            <span class="post-title" title="centos 7安装gdal">centos 7安装gdal</span>
            <span class="post-date" title="2018-05-18 20:46:25">2018/05/18</span>
        </a>
        
        <a  class="java neo4j "
           href="/2019/12/27/2019-12-27-custom-neo4j2/"
           data-tag="neo4j扩展开发"
           data-author="" >
            <span class="post-title" title="neo4j自定义call函数">neo4j自定义call函数</span>
            <span class="post-date" title="2019-12-27 20:46:25">2019/12/27</span>
        </a>
        
        <a  class="gis 前端 "
           href="/2020/09/25/2020-09-25-kill-the-sprite/"
           data-tag="mapbox"
           data-author="" >
            <span class="post-title" title="干掉mapbox里的雪碧图(sprite)">干掉mapbox里的雪碧图(sprite)</span>
            <span class="post-date" title="2020-09-25 20:46:25">2020/09/25</span>
        </a>
        
        <a  class="gis 服务端 "
           href="/2020/11/05/2020-11-5-java-read-gdb/"
           data-tag="arcgis"
           data-author="" >
            <span class="post-title" title="java读取arcgis的gdb文件">java读取arcgis的gdb文件</span>
            <span class="post-date" title="2020-11-05 20:46:25">2020/11/05</span>
        </a>
        
    </nav>
</div>
    </div>
    <div class="hide-list">
        <div class="semicircle">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div class="post">
    <div class="pjax">
        <article id="post-2020-09-25-kill-the-sprite" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">干掉mapbox里的雪碧图(sprite)</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            
                <a  data-rel="gis">gis</a>/
            
                <a  data-rel="前端">前端</a>
            
        </span>
        
        
        <span class="tag">
            
            <a class="color2">mapbox</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
        创建时间:<time class="date" title='更新时间: 2020-10-26 23:00:24'>2020-09-25 20:46</time>
        
    </div>
    <div class="article-meta">
        
        <span>字数:1.2k</span>
        
        
        <span id="busuanzi_container_page_pv">
            阅读:<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
        <span class="top-comment" title="跳转至评论区">
            <a href="#comments">
                评论:<span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </a>
        </span>
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#什么是雪碧图"><span class="toc-text">什么是雪碧图</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#用雪碧图来配图标的缺点"><span class="toc-text">用雪碧图来配图标的缺点</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#用单个图标来替代雪碧图"><span class="toc-text">用单个图标来替代雪碧图</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#单个图标的使用"><span class="toc-text">单个图标的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#解决单个图标加载的性能问题"><span class="toc-text">解决单个图标加载的性能问题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#总结"><span class="toc-text">总结</span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="什么是雪碧图"><a href="#什么是雪碧图" class="headerlink" title="什么是雪碧图"></a>什么是雪碧图</h1><p>雪碧图源于前端的小图标展现技术，将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。<br>对于含有大量小图标的页面，雪碧图把多个图片请求合并成了一个，大幅提高了加载性能。<br><img src="/myimgs/20200925/1.jpg" alt="雪碧图"></p>
<p>mapbox中也采用了类似的思想：当我们配置了多个symbol类型的图层时，为了减少图标的请求数，mapbox也提供了雪碧图的加载方式</p>
<pre><code class="js">        var map = new mapboxgl.Map({
            container: &#39;map&#39;,
            style: {
                &quot;version&quot;: 8,
                &quot;sources&quot;: {},
                &quot;layers&quot;: [],
                &quot;sprite&quot;: baseUrl + &quot;/assets/sprites/mysprites&quot;,//配置一个雪碧图的url路径
            },
            //...
        });</code></pre>
<p>配置了sprite字段后，mapbox就会去加载雪碧图png和一个json配置：</p>
<pre><code class="js">{
  &quot;icon1&quot;: {
    &quot;x&quot;: 324,
    &quot;y&quot;: 308,
    &quot;width&quot;: 20,
    &quot;height&quot;: 11,
    &quot;pixelRatio&quot;: 1,
    &quot;sdf&quot;: false
  },
  &quot;icon2&quot;: {
    &quot;x&quot;: 221,
    &quot;y&quot;: 464,
    &quot;width&quot;: 15,
    &quot;height&quot;: 15,
    &quot;pixelRatio&quot;: 1,
    &quot;sdf&quot;: false
  },
  //...
}</code></pre>
<p>随后，我们就可以在图层中使用这个图标了:</p>
<pre><code class="js">map.addLayer(
            {
                &quot;id&quot;: &quot;mylayer&quot;,
                &quot;type&quot;: &quot;symbol&quot;,
                &quot;source&quot;: &quot;mysource&quot;,
                &quot;source-layer&quot;: &quot;mylayersource&quot;,
                &quot;layout&quot;: {
                    &quot;icon-image&quot;: &quot;icon1&quot;,
                }
            }

)</code></pre>
<h1 id="用雪碧图来配图标的缺点"><a href="#用雪碧图来配图标的缺点" class="headerlink" title="用雪碧图来配图标的缺点"></a>用雪碧图来配图标的缺点</h1><p>想在雪碧图上改图标就不那么容易，尤其是我这种大老粗的程序员，还要买杯奶茶去劳烦美工妹子帮忙。<br>嗯，当然也可以写段代码去修改它，或者直接找一些相关的开源工具来解决。</p>
<p>然而，矢量瓦片的一大卖点就是用户可以在前端自由定制样式，要去修改图片这个操作一定程度上限制了矢量瓦片样式的灵活性。</p>
<p>同时，目前mapbox仅支持传入一张雪碧图，假如用户自己的图层也配了一份雪碧图，那还需要把两个雪碧图合起来，也就是说图层的自由组合也受到了限制、</p>
<h1 id="用单个图标来替代雪碧图"><a href="#用单个图标来替代雪碧图" class="headerlink" title="用单个图标来替代雪碧图"></a>用单个图标来替代雪碧图</h1><h2 id="单个图标的使用"><a href="#单个图标的使用" class="headerlink" title="单个图标的使用"></a>单个图标的使用</h2><p>基于上述问题，在更灵活的样式配置的场景下，使用单个图标比雪碧图整合要方便的多：</p>
<pre><code class="js">let url = &#39;http://xxx.png&#39;
let iconId = &#39;icon1&#39;
map.loadImage(url, function (err, img) {
            if (map.hasImage(iconId)) {
                map.updateImage(iconId, img)
            } else {
                map.addImage(iconId, img)
            }
            map.addLayer({
                                         &quot;id&quot;: &quot;mylayer&quot;,
                                         &quot;type&quot;: &quot;symbol&quot;,
                                         &quot;source&quot;: &quot;mysource&quot;,
                                         &quot;source-layer&quot;: &quot;mylayersource&quot;,
                                         &quot;layout&quot;: {
                                             &quot;icon-image&quot;: iconId,
                                         }
            })
})</code></pre>
<p>需要更换/新增图标时，只要改一下图标url之类的代码即可。</p>
<h2 id="解决单个图标加载的性能问题"><a href="#解决单个图标加载的性能问题" class="headerlink" title="解决单个图标加载的性能问题"></a>解决单个图标加载的性能问题</h2><p>前面提到，使用雪碧图是为了减少图片请求数量从而提高加载性能，当图标数量很多时，我们传多个url去请求图片就不合适了。</p>
<p>幸好loadImage函数传入的url允许是一个base64字符串，例如:</p>
<pre><code>...f394uLiwAAAP===</code></pre><p>于是，我们可以编写一个服务，批量传入图标id，批量返回图标base64字符串，从而将多个请求合并为一个</p>
<pre><code>#请求url
http://xxx/getIcons?id=icon1,icon2

#返回数据
{
    icon1:&#39;...f394uLiwAAAP===&#39;,
    icon2:&#39;yH5B…EoqQqJKT1TRk1V7S2xYJADs=&#39;
}
</code></pre><p>然后，再编写一段对应的前端加载函数即可：</p>
<pre><code class="js">    /**
     * 从自定义服务批量加载图片
     * @param map
     * @param ids
     * @param cb
     */
    function loadBatch(map, ids, cb) {
        let uuids = &#39;&#39;;
        for (let iconId in ids) {
            const uuid = ids[iconId];
            uuids += uuid + &#39;,&#39;
        }
        $.ajax({
            type: &#39;POST&#39;,
            url: &quot;http://xxx/getIcons&quot;,
            data: {ids: uuids},
            cache: true,
            dataType: &#39;json&#39;,
            success: function (json) {//获取数据
                const notFinds = [];
                const urls = {};
                for (let iconId in ids) {
                    const uuid = ids[iconId];
                    const base64 = json[uuid]
                    if (!base64) {
                        notFinds.push(iconId)
                    } else {
                        urls[iconId] = base64
                    }
                }
                loadFromUrls(map, urls, cb)
            }

        });
    }

    /**
     * 批量加载url图片
     * @param map
     * @param urls 请求urls {&lt;id1&gt;:&lt;url1&gt;,&lt;id2&gt;:&lt;url2&gt;,...}
     * @param cb 回调函数 {imgs:{},errs:{}}
     */
    function loadFromUrls(map, urls, cb) {
        const res = {
            imgs: {},
            errs: {}
        }
        let num = Object.keys(urls).length

        function doReturn() {
            num--;
            if (num == 0) {
                cb(res)
            }
        }

        function subCb(iconId, img) {
            res.imgs[iconId] = img;
            doReturn();
        }

        function subErrCb(iconId, err) {
            res.errs[iconId] = err;
            doReturn();
        }

        for (let iconId in urls) {
            const url = urls[iconId];
            loadFromUrl(map, iconId, url, subCb, subErrCb)
        }
    }

    /**
     * 加载url
     * @param map
     * @param iconId 图标id
     * @param url url 可以是base64url
     * @param cb 加载成功回调
     * @param errCb 加载错误回调
     */
    function loadFromUrl(map, iconId, url, cb, errCb) {
        map.loadImage(url, function (err, img) {
            if (err) {
                if (errCb) {
                    errCb(iconId, err)
                } else {
                    throw err
                }
            }
            if (map.hasImage(iconId)) {
                map.updateImage(iconId, img)
            } else {
                map.addImage(iconId, img)
            }
            cb(iconId, img)
        })
    }
</code></pre>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>虽然当下的web开发讲究前后端分离，<br>但是从雪碧图的这个例子可以看出，作为一个giser，在主修前端or后端的一方时，还是要多去同时了解下前后端的知识，才能设计出更高效、灵活的方案。</p>

      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 liuyu@wowtools.org </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>


<div class="article_copyright">
    <p><span class="copy-title">文章标题:</span>干掉mapbox里的雪碧图(sprite)</p>
    <p><span class="copy-title">文章字数:</span><span class="post-count">1.2k</span></p>
    <p><span class="copy-title">本文作者:</span><a  title="刘雨">刘雨</a></p>
    <p><span class="copy-title">发布时间:</span>2020-09-25, 20:46:25</p>
    <p><span class="copy-title">最后更新:</span>2020-10-26, 23:00:24</p>
    <span class="copy-title">原始链接:</span><a class="post-url" href="/2020/09/25/2020-09-25-kill-the-sprite/" title="干掉mapbox里的雪碧图(sprite)">https://blog.wowtools.org/2020/09/25/2020-09-25-kill-the-sprite/</a>
    <p>
        <span class="copy-title">版权声明:</span><i class="fa fa-creative-commons"></i> <a rel="license noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="CC BY-NC-SA 4.0 International" target = "_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
    </p>
</div>



    <div id="comments"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">

<script type="text/javascript">
    $.getScript('/js/gitalk.js', function () {
        var gitalk = new Gitalk({
            clientID: '7827a2a274092d600318',
            clientSecret: '448c39c3e1a7a168c7b82f1d91b54801c00bd4ce',
            repo: 'gitalkissue',
            owner: 'codingmiao',
            admin: ['codingmiao'],
            id: decodeURI(location.pathname),
            distractionFreeMode: 'true',
            language: 'zh-CN',
            perPage: parseInt('10',10)
        })
        gitalk.render('comments')
    })
</script>




    




    </div>
    <div class="copyright">
        <p class="footer-entry">©2016-2019 liuyu</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full"><span class="min "></span></button>
<button class="post-toc-menu"><span class="post-toc-menu-icons"></span></button>
<div class="post-toc"><span class="post-toc-title">目录</span>
    <div class="post-toc-content">

    </div>
</div>
<a class="" id="rocket" ></a>

    </div>
</div>
<div class="acParent"></div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.0.1" ></script>

<script src="/js/script.js?v=1.0.1" ></script>
<script>
    var img_resize = 'default';
    /*作者、标签的自动补全*/
    $(function () {
        $('.search').AutoComplete({
            'data': ['#geoserver','#奇葩问题','#arcgis','#neo4j扩展开发','#dojo','#PostgreSQL','#gdal','#mapbox',],
            'itemHeight': 20,
            'width': 418
        }).AutoComplete('show');
    })
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $(".post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        
        $('pre code').each(function(){
            var lines = $(this).text().split('\n').length - 1, widther='';
            if (lines>99) {
                widther = 'widther'
            }
            var $numbering = $('<ul/>').addClass('pre-numbering ' + widther).attr("unselectable","on");
            $(this).addClass('has-numbering ' + widther)
                    .parent()
                    .append($numbering);
            for(var i=1;i<=lines;i++){
                $numbering.append($('<li/>').text(i));
            }
        });
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<style>
    pre{
        position: relative;
        margin-bottom: 24px;
        border-radius: 10px;
        border: 1px solid #e2dede;
        background: #FFF;
        overflow: hidden;
    }
    code.has-numbering{
        margin-left: 30px;
    }
    code.has-numbering.widther{
        margin-left: 35px;
    }
    .pre-numbering{
        margin: 0px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        padding: 0.5em 3px 0.7em 5px;
        border-right: 1px solid #C3CCD0;
        text-align: right;
        color: #AAA;
        background-color: ;
    }
    .pre-numbering.widther {
        width: 35px;
    }
</style>

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
        .nav .hide-list.fullscreen {
            left: 492px
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    
    .post .pjax article .article-entry>ol, .post .pjax article .article-entry>ul, .post .pjax article>ol, .post .pjax article>ul{
        border: #e2dede solid 1px;
        border-radius: 10px;
        padding: 10px 32px 10px 56px;
    }
    .post .pjax article .article-entry li>ol, .post .pjax article .article-entry li>ul,.post .pjax article li>ol, .post .pjax article li>ul{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .post .pjax article .article-entry>ol>li, .post .pjax article .article-entry>ul>li,.post .pjax article>ol>li, .post .pjax article>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    .post .pjax article .article-entry li>ol>li, .post .pjax article .article-entry li>ul>li,.post .pjax article li>ol>li, .post .pjax article li>ul>li{
        margin-bottom: auto;
        margin-left: auto;
    }
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    
    .nav-right:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background: url("https://i.loli.net/2019/07/22/5d3521411f3f169375.png");
        background-repeat: no-repeat;
        background-position: 50% 0;
        -ms-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }
    

    
</style>








<!-- 百度统计代码 -->
<script>
var _hmt = _hmt || [];
(function() {
  console.log('baidu_tj init')
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?9b0952b597daef8813158f4936f63a00";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- end百度统计代码 -->

</html>
